<template>
	<view class="content">
		<view class="goodlist">
			<image src="../../static/images/noshuju.png" class="no-data" v-show="noshuju"></image>
			<view class="good-item" @tap="goinfo" v-for="(item,index) in newslist" :key="index" :data-id="item.id">
				<view class="good-img">
					<image :src="item.filepath"></image>
				</view>
				
				<view class="goods-title">
					{{item.name}}
				</view>
				<view v-if="role=='p'" style="color: #999999;padding: 0rpx 20rpx;margin-bottom: 10rpx;margin-top: -15rpx;"><text style="font-size: 18rpx;">￥</text><text style="font-size: 24rpx;text-decoration: line-through;">{{item.price}}</text></view>
				<view v-if="role=='s'" style="color: #999999;padding: 0rpx 20rpx;margin-bottom: 10rpx;margin-top: -15rpx;"><text style="font-size: 18rpx;">零售￥</text><text style="font-size: 24rpx;text-decoration: line-through;">{{item.user_price}}</text></view>
				<view class="goods-price" v-if="role=='p'">
					<text style="font-size: 20rpx;">￥</text>{{item.user_price}}
				</view>
				<view class="goods-price" v-if="role=='s'">
					<text style="font-size: 20rpx;">￥</text>{{item.merchant_price}}
				</view>
				<image :src="item.iscar==1?'../../static/images/jiarugouwuche.png':'../../static/images/jiarugouwucheno.png'" class="addgouwu" @tap.stop="addcar" :data-index="index" :data-id="item.id"></image>
				<image v-if="item.collect==1" src="../../static/images/shoucang-active.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
				<image v-if="item.collect==0" src="../../static/images/shoucang.png" class="shoucang" @tap.stop="shoucang" :data-id="item.id" :data-index="index" ></image>
			</view>
		</view>
	</view>
</template>

<script>
	import httpPath from '@/static/js/path.js';
	import {isshangjia} from "@/static/js/login.js";
	import {getlogin} from "@/static/js/login.js";
	var page=1;
	import MescrollUni from "@/components/uni-load-more.vue";
	export default {
			data() {
				return {
					role:"",//角色 
					wxinfo_id:0,
					loadingType: 0,
					contentText: {
						contentdown: "上拉显示更多",
						contentrefresh: "正在加载...",
						contentnomore: "没有更多数据了"
					},
					newslist:[],
					noshuju:false,//是否出现没有数据的图片
				}
			},
			components: {
				MescrollUni
			},
			onPullDownRefresh() {
				page=1
				this.loadingType=0;
			    this.getdata();   
			    setTimeout(function () {
			            uni.stopPullDownRefresh();
			    }, 1000);
			},
			onReachBottom: function() {
				if (this.loadingType != 0) {//loadingType!=0;直接返回
					return false;
				}
				this.loadingType = 1;
				uni.showNavigationBarLoading();//显示加载动画
				page++;//每触底一次 page +1
				uni.request({
					url: httpPath.filePath+"/index/product/recommend",
					method:'POST',
					header:{'content-type':'application/x-www-form-urlencoded'},
					data: {page:page,wxinfo_id:this.wxinfo_id},
					success: (res) => {
						if (res.data.data.info.length==0) {//没有数据
							this.loadingType = 2;
							uni.hideNavigationBarLoading();//关闭加载动画
							return false;
						}
						for (let i = 0;i < res.data.data.info.length;i++) {
							
							this.newslist.push(res.data.data.info[i]);
							
						}
						this.loadingType = 0;//将loadingType归0重置
						uni.hideNavigationBarLoading();//关闭加载动画
						
					}
				});
			
			},
			onLoad(option) {
				this.loadingType=0;
				page= 1;
				let ss = uni.getStorageSync('user');
				if(ss){
					this.wxinfo_id=ss.wxinfo_id;
				}else{
					this.wxinfo_id=0;
				}
				this.getdata()
				
				this.role=isshangjia()
			},
			methods: {
				// 加入购物车
				addcar(e){
					let id = e.currentTarget.dataset.id;
					let index = e.currentTarget.dataset.index;
					let userinfo= getlogin();
					if(userinfo){
						uni.request({
							url: httpPath.filePath+"/index/shopping/publish",
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: {spu_id:id,count:1,wxinfo_id:this.wxinfo_id},
							success: (res) => {
								if(res.data.code==200){
									this.newslist[index].iscar=1;
								}
							}
						});
					}
				},
				/**
				 * 收藏商品
				 */
				shoucang(e){
					let id = e.currentTarget.dataset.id;
					let index = e.currentTarget.dataset.index;
					// let type = e.currentTarget.dataset.type;
					let userinfo= getlogin();
					if(userinfo){
						uni.request({
							url: httpPath.filePath+'/index/spucollect/publish',
							method:'POST',
							header:{'content-type':'application/x-www-form-urlencoded'},
							data: {wxinfo_id:this.wxinfo_id,id:id},
							success: (res) => {
								if(res.data.code==200){
									this.newslist[index].collect=1;
								}else if(res.data.code==201){
									this.newslist[index].collect=0;
								}  
							}
						});
					}
				},
				/**
				 *去往详情页面
				 */
				goinfo(e){
					uni.navigateTo({
						url:"goodsinfo?id="+e.currentTarget.dataset.id
					})
				},
				/**
				 * 获取数据
				 */
	           getdata(){
					uni.request({
						url: httpPath.filePath+'/index/product/recommend',
						method:'POST',
						header:{'content-type':'application/x-www-form-urlencoded'},
						data: {page:page,wxinfo_id:this.wxinfo_id},
						success: (res) => {
							if(res.data.code==200){
								if(res.data.data.info.length!=0){
									this.noshuju=false;
									this.newslist=res.data.data.info;
								}else{
									this.noshuju=true;
								}	
							}   
						}
				   });
			   }
			},
			
		}
</script>

<style>
	page{background: #f9f9f9;}
	.goodlist{margin-top: 20rpx;
	box-sizing: border-box;
	overflow: hidden;
}
.good-item{width: 375rpx;border-radius: 5px;position: relative;padding-bottom: 15rpx;float: left;margin-bottom: 30rpx;}
.good-img{width:375rpx;height: 375rpx;overflow: hidden;}
.good-img image{width: 100%;height: 100%;}
.goods-title{
	margin-bottom: 30rpx;
	padding: 0rpx 10rpx 0px 30rpx;
	height: 75rpx;font-size: 28rpx;color: #333;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical; 
	-webkit-line-clamp: 2; 
	line-height: 38rpx;
}
.goods-price{font-size: 32rpx;font-weight: bold;padding: 0px 20rpx;}
.shoucang{width: 41.2rpx;height: 37rpx;position: absolute;bottom:15rpx ;right:15rpx ;}
.addgouwu{
	width: 50rpx!important;height: 45rpx!important;
	position: absolute;bottom: 65rpx;right: 10rpx;

}
</style>
